<template>
  <div>
    <h1>查看Vue的过渡动画效果-购物车小球</h1>
    <button @click="isShow = !isShow">控制元素的显示和隐藏</button>
    <!--  -->
    <transition
      name="four"
      @before-enter="oneBeforeEnter"
      @enter="oneEnter"
      @after-enter="oneAfterEnter"
    >
      <div v-show="isShow" class="text">我是第三方动画元素</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "AnimCart",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    oneBeforeEnter(el) {
      console.log("oneBeforeEnter");
      el.style.transform = "translate(0,0)";
    },

    //oneEnter接受第二个参数,是oneAfterEnter这个钩子
    oneEnter(el, done) {
      console.log("oneEnter");
      el.offsetLeft;
      //当开始执行动画的时候,我们设置他的终点位置和过渡效果
      el.style.transform = "translate(340px,300px)";
      el.style.transition = "all 1s linear";

      //提前执行oneAfterEnter钩子
      done();
    },
    //默认是动画执行完成才执行
    oneAfterEnter() {
      console.log("oneAfterEnter");
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
.text {
  width: 200px;
  height: 50px;
  background: yellowgreen;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 2px;
}

/* .four-enter,
.four-leave-to {
  opacity: 0;
  transform: translate(100px, 300px);
}

.four-enter-active,
.four-leave-active {
  transition: all 0.5s linear;
} */
</style>